//  此处完成购物车逻辑代码
//1. 先把list里面的数据渲染出来
//2. 能够全选反选同时总价 总购买数量变化
//3. 单个商品数量能够加减 但是有限制 加减的时候小记价格，总价要变化，总购买数量也要变化
//4. 能够删除单个商品，删除的同时 总购买数量和总价要变化
//5. 能够删除选中商品，删除的同时 总购买数量和总价要变化
//6. 能够清空购物车，总数量和总价要对应变化

//获取页面中外层盒子content
let content = document.querySelector('.content');

//以下为页面渲染
HTML();
function HTML(){
 // 当前选中的个数
 let selectNum = 0;
 // 商品总数
 let totalNum = 0;
 // 商品总价
 let totalPrice = 0;
 list.forEach(function (ele) {
   if (ele.select) {
     totalPrice += ele.price * ele.buy_num;
     totalNum += ele.buy_num;
     selectNum++;
   }
 });


  let str =
`
<div class="top">
  <input type="checkbox" 
  ${selectNum >= list.length && selectNum != 0 ? "checked" : ""} 
  class="select_all"> 全选
</div>
`

list.forEach((ele) => {
    str += `
    <ul class="center">
  <li>
    <div class="select">
      <input type="checkbox" data-id="${ele.id}" class="select_one" ${ele.select ? "checked" : ""}>
    </div>
    <div class="pic">
      <img src='${ele.pic}' alt=""/>
    </div>
    <div class="name">
    ${ele.name}
    </div>
    <div class="price">
      ￥ <span>${ele.price}</span>
    </div>
    <div class="number">
      <button data-id="${ele.id}" class='reduce'>-</button>
      <input class='buynum' type="text" value="${ele.buy_num}">
      <button data-id="${ele.id}" class='add'>+</button>
    </div>
    <div class="subtotal">
      ￥ <span>${ele.price*ele.buy_num}</span>
    </div>
    <div class="del">
      <button data-id="${ele.id}" class="del_btn">删除</button>
    </div>
  </li>
</ul>
    `;
});
str += 
`
<div class="bottom">
  <p>总购买数量: ${totalNum}</p>
  <p>
    <button class="pay" data-price="${totalPrice}">去结算</button>
    <button class="clear">清空购物车</button>
    <button class="clear_select">删除所有已选中</button>
    <button class="list">返回列表页</button>
  </p>
  <p>总价格 : ￥ <span>${totalPrice}</span></p>
</div>
`
content.innerHTML = str; 
}

//上面为页面渲染，这里为渲染结束



content.addEventListener('click',function(e){
    // 处理浏览器事件对象兼容
    e = e || window.event;
  let target = e.target;
    if (target.className == "clear") {
        // 1. 把list变成一个空数组
        list = [];
      };
     
    // 判断点击的是全选
if (target.className == "select_all") {
  // 1. 拿到自己是true 还是false
  let type = target.checked;
  // 2. 赋值
  list.forEach(function (ele) {
    ele.select = type;
  });
}





    if(target.className == 'reduce'){
      //点击减少按键时使对应的商品数量减少1
        // 1. 拿到自己身上记录的id
    let id = target.dataset.id;
    // 拿到指定数据
    let goods = list.find((ele) => {
      return ele.id == id;
    });
    // 3. 判断一下是否已经是 1
    if (goods.buy_num <= 1) return;
    goods.buy_num--;
      };


      if(target.className == 'add'){
        //点击减少按键时使对应的商品数量减少1
          // 1. 拿到自己身上记录的id
      let id = target.dataset.id;
      // 拿到指定数据
      let goods = list.find((ele) => {
        return ele.id == id;
      });
      // 3. 判断一下是否已经是 1
      if (goods.buy_num >= 10) return;
      goods.buy_num++;
        };

    // 判断点击的是每一个商品的选项按钮
    if (target.className == "select_one") {
    let id = target.dataset.id;
    // 2. 在list中找到数组中和id一样的那一条数据
    let goods = list.find(function (ele) {
      return ele.id == id;
    });
    // 3. 把内容修改掉
    goods.select = !goods.select;
  }


   // 判断点击的是每一个商品的删除按钮
   if (target.className == "del_btn") {
    let id = target.dataset.id;
    list = list.filter(function (ele) {
      return ele.id != id;
    });
  }



    // 判断点击的是删除所有已选中
    if (target.className == "clear_select") {
      // 1.把list里面所有的select为true删除
      // 把list里面select为false留下
      list = list.filter(function (ele) {
        return ele.select == false;
      });
    }
  





      HTML();
})